<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../statics/css/comment-ui.css">
    <!--    <script type="text/javascript" src="../statics/js/jquery-3.6.0.js"></script>-->
    <script type="text/javascript" src="../statics/js/axios.js"></script>

</head>

<body>
<div id="comment-vue">
    <div v-clickoutside="hideReplyBtn" class="my-subCommentList">
        <el-avatar class="header-img" :size="40"
                   :src="'https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/'+picture"></el-avatar>
        <!--        <div class="subCommentList-info">-->
        <!--            <div tabindex="0" contenteditable="true" id="replyInput" spellcheck="false" placeholder="输入评论..."-->
        <!--                 class="subCommentList-input" @focus="showReplyBtn" @input="onDivInput($event)">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="subCommentList-btn-box" v-show="btnShow">-->
        <!--            <el-button class="subCommentList-btn" size="medium" @click="sendComment" type="primary">发表</el-button>-->
        <!--        </div>-->
        <!--        -->
        <el-form @submit.native.prevent label-width="80px">
            <el-form-item label="回复">
                <el-input @focus="showReplyBtn" v-model="replyContent"></el-input>
            </el-form-item>
            <el-form-item v-show="btnShow">
                <el-button type="primary" @click="sendComment">发表</el-button>
                <el-button @click="hideReplyBtn">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!--    遍历根评论-->
    <div v-for="(item,i) in commentDivList" :key="i" class="author-title subCommentList-father">
        <el-avatar class="header-img" :size="40"
                   :src="'https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/'+item.rootComment.picture"></el-avatar>
        <div class="author-info">
            <span class="author-name">{{item.rootComment.nickName}}</span>
            <span class="author-time">{{item.rootComment.modifyDate}}</span>
        </div>
        <div class="icon-btn">
                <span @click="showReplyInput(i,item.rootComment.nickName,item.rootComment.id)"><i
                        class="iconfont el-icon-s-comment"></i>回复</span>
<!--            <i class="iconfont el-icon-caret-top"></i>{{item.rootComment.thumpsUp}}-->
        </div>
        <div class="talk-box">
            <p>
                <span class="subCommentList">{{item.rootComment.content}}</span>
            </p>
        </div>
        <!--        遍历显示根评论旗下的子评论-->
        <div class="subCommentList-box">
            <div v-for="(sc,j) in item.subCommentList" :key="j" class="author-title">
                <!--                头像-->
                <el-avatar class="header-img" :size="40"
                           :src="'https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/'+sc.picture"></el-avatar>
                <div class="author-info">
                    <span class="author-name">{{sc.nickName}}</span>
                    <span class="author-time">{{sc.modifyDate}}</span>
                </div>
                <!--                点击展示输入框-->
                <div class="icon-btn">
                    <span @click="showReplyInput(i,sc.nickName,sc.id)">
                        <i class="iconfont el-icon-s-comment"></i>回复
                    </span>
<!--                    <i class="iconfont el-icon-caret-top"></i>{{sc.thumpsUp}}-->
                </div>
                <!--                展示回复谁-->
                <div class="talk-box">
                    <p>
                        <span>回复 {{getCommentNickName(sc.commentId,i,j)}}:</span>
                        <span class="subCommentList">{{sc.content}}</span>
                    </p>
                </div>
                <div class="subCommentList-box">
                </div>
            </div>
        </div>
        <!--        分页 -->
        <el-pagination v-show="item.subPagination"
                       :page-size="rootPageSize"
                       :pager-count="5"
                       layout="prev, pager, next"
                       :total="commentDivList[i].subCommentListCount"
                       @current-change="(val)=>{subCurrentChange(val,i,item.rootComment.id)}">
        </el-pagination>
        <div style="margin: 0 auto">
            <el-button type="primary" @click="showAllSubComment(i,item.rootComment.id)" v-show="item.showAllBtn"
            >展开全部{{item.subCommentListCount}}条评论
            </el-button>
        </div>
        <!--        评论回复框显示-->
        <div v-show="_inputShow(i)" class="my-subCommentList my-content-subCommentList">
            <!--            头像-->
            <el-avatar class="header-img" :size="40"
                       :src="'https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/'+picture"></el-avatar>
            <!--            输入框-->
            <!--            <div class="subCommentList-info">-->
            <!--                <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..."-->
            <!--                     @input="onDivInput($event)" class="subCommentList-input subCommentList-content-input"></div>-->
            <!--            </div>-->
            <!--            &lt;!&ndash;            提交&ndash;&gt;-->
            <!--            <div class=" subCommentList-btn-box">-->
            <!--                <el-button class="subCommentList-btn" size="medium" @click="sendCommentReply(i,j)" type="primary">发表评论-->
            <!--                </el-button>-->
            <!--            </div>-->
            <el-form @submit.native.prevent label-width="80px">
                <el-form-item label="回复">
                    <el-input v-model="replyContent" :placeholder="'回复:'+replyNickName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="sendCommentReply(i)">发表</el-button>
                    <el-button @click="onCancelSubmit(i)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!--    超过pager-count就显示省略号-->
    <el-pagination
            :page-size="rootPageSize"
            :pager-count="5"
            layout="prev, pager, next"
            :total="rootPageCount"
            @current-change="currentChange">
    </el-pagination>
</div>

</body>
<!--<script type="text/javascript" src="js/vue.js"></script>-->
<!-- <script type="text/javascript" src="js/avatar"></script> -->
<!--<script type="text/javascript" src="js/element.js"></script>-->
<script type="text/javascript">
    const clickoutside = {
        // 初始化指令
        bind(el, binding, vnode) {
            function documentHandler(e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false;
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e);
                }
            }

            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.vueClickOutside = documentHandler;
            document.addEventListener('click', documentHandler);
        },
        update() {

        },
        unbind(el, binding) {
            // 解除事件监听
            document.removeEventListener('click', el.vueClickOutside);
            delete el.vueClickOutside;
        }
    };
    new Vue({
        el: '#comment-vue',
        created() {
            this.replyGoodsId = $.getUrlParam("goodsId");
            // console.log("@@@@"+userInfo.id);
            axios.get("/comment/getComments?goodsId=" + this.replyGoodsId).then(resp => {
                console.log("@@@created",resp.data.code);
                if(resp.data.code!==20000){
                    alert(resp.data.message);
                    return;
                }
                let commentDivList = resp.data.data.commentDivList;
                this.rootPageCount = resp.data.data.commentDivListCount;
                this.nickName = resp.data.data.nickName;
                this.picture = resp.data.data.picture;
                // console.log(commentDivList);
                for (var i = 0; i < commentDivList.length; i++) {
                    commentDivList[i].rootComment.inputShow = false;
                    //判断是否展示显示全部的安扭
                    commentDivList[i].showAllBtn = commentDivList[i].subCommentListCount > 3;
                    //显示sub分页
                    commentDivList[i].subPagination = false;
                    //储存id与昵称键值对，用于查询回复的对象。
                    localStorage.setItem((commentDivList[i].rootComment.id), (commentDivList[i].rootComment.nickName));
                    for (var j = 0; j < commentDivList[i].subCommentList.length; j++) {
                        localStorage.setItem((commentDivList[i].subCommentList[j].id), (commentDivList[i].subCommentList[j].nickName));
                    }
                }
                // console.log(commentDivList);
                this.commentDivList = commentDivList;
                console.log(this.commentDivList);
                console.log(resp.data.data);
            }).catch(error => {
                console.log(error);
            })
        },
        data: {
            //-------分页所需数据--------------
            rootPageSize: 10,
            rootPageCount: 0,
            //userInfo
            btnShow: false,
            index: '0',
            nickName: 'Lana Del Rey',
            picture: 'defaultProfileImage.jpg',
            id: 0,
            replyNickName: '',
            replyUserId: '0',
            replyCommentId: '0',
            replyGoodsId: '0',
            replyContent: '',
            commentId: -1,
            commentDivList: []

        },
        directives: {
            clickoutside
        },
        methods: {
            getCommentNickName(id) {
                return localStorage.getItem(id);
            },
            showAllSubComment(i, id) {
                this.commentDivList[i].showAllBtn = false;
                this.commentDivList[i].subPagination = true;
                axios.get('/comment/getComments?goodsId=' + this.replyGoodsId + '&rootId=' + id)
                    .then(resp => {
                        if(resp.data.code!==20000){
                            alert(resp.data.message);
                            return;
                        }
                        let commentDiv = resp.data.data;
                        console.log(commentDiv);
                        this.commentDivList[i].subCommentList = commentDiv.subCommentList
                        //储存id与昵称键值对，用于查询回复的对象。
                        for (var m = 0; m < commentDiv.subCommentList.length; m++) {
                            localStorage.setItem(commentDiv.subCommentList[m].id, commentDiv.subCommentList[m].nickName);
                        }
                    })
            },

            //-----------分页相关点击方法-----------
            subCurrentChange(currentPage, i, id) {
                axios.get('/comment/getComments?goodsId=' + this.replyGoodsId + '&rootId=' + id + '&pageId=' + currentPage)
                    .then(resp => {
                        if(resp.data.code!==20000){
                            alert(resp.data.message);
                            return;
                        }
                        let commentDiv = resp.data.data;
                        console.log(commentDiv);
                        this.commentDivList[i].subCommentList = commentDiv.subCommentList
                        //储存id与昵称键值对，用于查询回复的对象。
                        for (var m = 0; m < commentDiv.subCommentList.length; m++) {
                            localStorage.setItem(commentDiv.subCommentList[m].id, commentDiv.subCommentList[m].nickName);
                        }
                    })
            },
            currentChange(currentPage) {//点击分页按钮
                axios.get('/comment/getComments?goodsId=' + this.replyGoodsId + '&pageId=' + currentPage)
                    .then(resp => {
                        if(resp.data.code!==20000){
                            alert(resp.data.message);
                            return;
                        }
                        let commentDivList = resp.data.data.commentDivList;
                        console.log(commentDivList);
                        for (var i = 0; i < commentDivList.length; i++) {
                            commentDivList[i].rootComment.inputShow = false;
                            //判断是否展示显示全部的安扭
                            commentDivList[i].showAllBtn = commentDivList[i].subCommentListCount > 3;
                            //显示sub分页
                            commentDivList[i].subPagination = false;
                            //储存id与昵称键值对，用于查询回复的对象。
                            localStorage.setItem((commentDivList[i].rootComment.id), (commentDivList[i].rootComment.nickName));
                            for (var j = 0; j < commentDivList[i].subCommentList.length; j++) {
                                localStorage.setItem((commentDivList[i].subCommentList[j].id), (commentDivList[i].subCommentList[j].nickName));
                            }
                        }
                        // console.log(commentDivList);
                        this.commentDivList = commentDivList;
                        console.log(this.commentDivList);
                        console.log(resp.data.data);
                    })
            },


            //-----------分页相关点击方法END-----------

            //取消根评论或者子评论的回复框
            onCancelSubmit(i) {
                this.commentDivList[i].rootComment.inputShow = false;
            },
            // inputFocus() {
            //     var replyInput = document.getElementById('replyInput');
            //     // replyInput.style.padding = "8px 8px"
            //     // replyInput.style.border = "2px solid blue"
            //     replyInput.focus()
            // },
            //显示商品回复框
            showReplyBtn() {
                this.btnShow = true;
                this.replyCommentId = ''//对应提交保单中的commentId，因为回复商品所以为空
            },
            //隐藏商品回复框
            hideReplyBtn() {
                this.btnShow = false
                // replyInput.style.padding = "10px"
                // replyInput.style.border = "none"
            },
            //显示回复根评论或子评论的回复框
            showReplyInput(i, nickName, id) {
                this.commentDivList[this.index].rootComment.inputShow = false;
                this.index = i;
                this.commentDivList[i].rootComment.inputShow = true;
                this.replyNickName = nickName;
                this.replyCommentId = id;//对应提交表单中的commentId
            },
            //调用展示函数展示回复框是否显示的属性
            _inputShow(i) {
                return this.commentDivList[i].rootComment.inputShow;
            },
            //点击商品的评论按钮
            sendComment() {
                //判断是否为空或者为空格
                let str = this.replyContent;
                str = str.replaceAll(' ', '');
                if (!str || str.length === 0) {
                    this.$message({
                        showClose: true,
                        type: 'warning',
                        message: '评论不能为空'
                    })
                    this.replyContent = '';
                } else {
                    var postData = {
                        goodsId: this.replyGoodsId,
                        commentId: this.replyCommentId,
                        userId: window.userInfo.id,
                        // userId: this.replyUserId,
                        content: this.replyContent
                    };
                    console.log(postData);
                    axios(
                        {
                            url: '/comment/giveComment',
                            contentType: "application/json;charset=UTF-8",
                            method: "POST",
                            // dataType: "json",
                            // data: JSON.stringify(postData)
                            data: postData
                        }
                    ).then((resp) => {
                        if(resp.data.code!==20000){
                            alert(resp.data.message);
                            return;
                        }
                        console.log(resp);
                        alert('回复成功');
                        let a = {rootComment: {}}
                        a.rootComment = resp.data.data;
                        console.log(a);
                        this.commentDivList.push(a);
                    });
                    // let a = {};
                    // let timeNow = new Date().getTime();
                    // let currentTime = this.dateStr(timeNow);
                    // a.rootComment = {};
                    // a.rootComment.nickName = this.nickName;
                    // a.rootComment.content = this.replyContent;
                    // a.rootComment.picture = this.picture;
                    // a.rootComment.modifyDate = currentTime;
                    // a.rootComment.commentNum = 0;
                    // a.rootComment.thumpsUp = 0;
                    // a.subCommentList = [];
                    // console.log(a);
                    // this.commentDivList.push(a);
                    // console.log(this.commentDivList);
                    this.replyContent = '';
                    // input.innerHTML = '';

                }
            },
            //点击子评论的回复按钮
            sendCommentReply(i) {
                // console.log(this.replyContent);
                let str = this.replyContent;
                str = str.replaceAll(' ', '');
                if (!str || str.length === 0) {
                    this.$message({
                        showClose: true,
                        type: 'warning',
                        message: '评论不能为空'
                    })
                } else {
                    if (window.userInfo == null) {
                        alert("请先登录");
                    } else {
                        var postData = {
                            goodsId: this.replyGoodsId,
                            commentId: this.replyCommentId,
                            userId: window.userInfo.id,
                            content: this.replyContent
                        };
                        console.log(postData);
                        axios(
                            {
                                url: '/comment/giveComment',
                                contentType: "application/json;charset=UTF-8",
                                method: "POST",
                                // dataType: "json",
                                // data: JSON.stringify(postData)
                                data: postData
                            }
                        ).then((resp) => {
                            if(resp.data.code!==20000){
                                alert(resp.data.message);
                                return;
                            }
                            console.log(resp);
                            alert('回复成功');
                            this.commentDivList[i].subCommentList.push(resp.data.data);
                        }, err => {
                            alert("回复失败,请检查网络连接");
                        })
                    }

                    //子评论添加进列表
                    // let a = {}
                    // let timeNow = new Date().getTime();
                    // let currentTime = this.dateStr(timeNow);
                    // a.nickName = this.nickName
                    // a.to = this.to
                    // a.picture = this.picture
                    // a.content = this.replyContent
                    // a.modifyDate = currentTime
                    // a.commentNum = 0
                    // a.thumpsUp = 0
                    // a.commentId=this.replyCommentId;
                    // a.rootId=this.commentDivList[i].rootComment.id;
                    // console.log(a);
                    // this.commentDivList[i].subCommentList.push(a)
                    this.replyContent = '';
                    // document.getElementsByClassName("subCommentList-content-input")[i].innerHTML = "";

                }
            },
            // onDivInput: function (e) {
            //     this.replyContent = e.target.innerHTML;
            // },
            dateStr(date) {
                //获取js 时间戳
                var time = new Date().getTime();
                //去掉 js 时间戳后三位，与php 时间戳保持一致
                time = parseInt((time - date) / 1000);
                //存储转换值
                var s;
                if (time < 60 * 10) {//十分钟内
                    return '刚刚';
                } else if ((time < 60 * 60) && (time >= 60 * 10)) {
                    //超过十分钟少于1小时
                    s = Math.floor(time / 60);
                    return s + "分钟前";
                } else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
                    //超过1小时少于24小时
                    s = Math.floor(time / 60 / 60);
                    return s + "小时前";
                } else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
                    //超过1天少于30天内
                    s = Math.floor(time / 60 / 60 / 24);
                    return s + "天前";
                } else {
                    //超过30天ddd
                    var date = new Date(parseInt(date));
                    return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
                }
            }
        }
    });
</script>


</html>